<template>
  <div class="singer-top-info">
    <!-- 照片展示 -->
    <div class="info-left">
      <img :src="songer.user.avatarUrl" alt="" />
    </div>
    <!-- 歌手信息展示 -->
    <div class="info-right">
      <div class="info-hd">
        <el-tag type="success" effect="plain">
          <span>歌手</span>
        </el-tag>
        <h2>{{ songer.user.nickname }}</h2>
      </div>
      <div class="info-caozuo">
        <el-button icon="el-icon-folder-add">收藏</el-button>
        <el-button icon="el-icon-user">个人主页</el-button>
        <el-button icon="el-icon-share">分享</el-button>
      </div>
      <div class="info-describe">
        <ul>
          <li>
            <span>
              <i class="iconfont icon-yinyue"></i>
              单曲数：{{ songer.artist.musicSize }}
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-zhuanji"></i>
              专辑数：{{ songer.artist.albumSize }}
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-mv"></i>
              MV数：{{ songer.artist.mvSize }}
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    songer: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
.singer-top-info {
  display: flex;
  align-items: center;
  .info-left {
    width: 240px;
    height: 240px;
    margin: 10px 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-right {
    height: 240px;
    .info-hd {
      display: flex;
      align-items: center;
      margin-top: 40px;
      h2 {
        margin-left: 20px;
      }
      span {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .info-caozuo {
      margin-top: 10px;
    }
    .info-describe{
        margin: 20px 0px;
        li{
            margin-bottom: 5px;
            span{
                font-size: 16px;
                font-weight: 700px;
            }
        }
    }   
  }
}
</style>